<%--
  Created by IntelliJ IDEA.
  User: zhaohu
  Date: 2020/4/12
  Time: 13:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="static/jquery-1.12.4/jquery-1.12.4.js"></script>
    <%--    引入jquery资源文件：必须在bootstrap资源文件之前引入--%>
    <script type="text/javascript" src="static/jquery-1.12.4/jquery-1.12.4.js"></script>
    <%--    引入bootstrap的资源文件--%>
    <script type="text/javascript" src="static/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
    <link  rel="stylesheet" type="text/css" href="static/bootstrap-3.3.6-dist/css/bootstrap.css">

    <script type="text/javascript">
        function jquery_post() {
            console.log("正在准备ajax请求");
            //var userName =document.getElementById("userName").value;
            //var  userDizhi =document.getElementById("userDizhi").vlue;
            var userName = $("#userName").val();
            var userDizhi = $("#userDizhi").val();
            $.ajax(
                {
                    type: "POST",
                    url: "jqueryServlet",
                    data: "userName=" + userName + "&userDizhi=" + userDizhi,
                    dataType: "json",
                    success: function (data) {
                        //$("#showmag01").html(data)
                        console.log("ajax查询结果");
                        console.log(data);


                    }
                }
            )

            /* var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            var userName=document.getElementById("userName").value;
            //xmlhttp.open("GET","AjaxServlet?userName="+userName ,true);
            xmlhttp.open("POST","AjaxServlet" ,true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("userName="+userName);



            xmlhttp.onreadystatechange=docallback;
            function docallback() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //局部刷新
                    document.getElementById("showMag").innerHTML=xmlhttp.responseText;
                }
            }
            console.log("z正在执行ajax 请求")
            */

        }

    </script>

</head>
<body>
<body style="width: 100%">
<div style="width: 90%;margin: 10px auto;padding-top: 20px">
    <form class="form-horizontal" id="formque">
            <div class="form-group">
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
                    </div>

                    <label class="col-sm-2 control-label">地址</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="userDizhi" name="userDizhi" placeholder="请输入地址">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">联系电话</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="userCall" name="userCall" placeholder="请输入联系电话">
                    </div>

                    <label class="col-sm-2 control-label">注册日期</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="userDate" name="userDate" placeholder="请输入注册日期">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default" onclick="jquery_post()">查询</button>
                    </div>
                </div>
            </div>
        </form>
        <div style="width: 90%;margin: 10px auto">
            <div>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>地址</th>
                        <th>联系电话</th>
                        <th>注册日期</th>
                    </tr>
                    </thead>

                    <tbody>
                    <c:forEach items="${sessionScope.listAll}" var="eachBean" varStatus="stat">
                        <tr>
                            <th scope="row">${stat.index+1}</th>
                            <td>${eachBean.username}</td>
                            <td>${eachBean.userDizhi}</td>
                            <td>${eachBean.userCall}</td>
                            <td> ${eachBean.userDate}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>

        </div>


    </div>
</form>

</body>
</body>
</html>